home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap12 / dun12_9.txt < prev   
Encoding:
Text File  |  1997-12-18  |  10.9 KB  |  435 lines
  1. <HTML>
  2.  
  3. <HEAD>
  4.  
  5. <TITLE>Bringing it all together</TITLE>
  6.  
  7. </HEAD>
  8.  
  9.  
  10.  
  11. <SCRIPT LANGUAGE="JavaScript">
  12.  
  13. var L=new layerTool();
  14.  
  15. function layerTool()
  16.  
  17.     {
  18.  
  19.     if (navigator.appName=="Netscape")
  20.  
  21.         this.layerProp=navProp;
  22.  
  23.     else
  24.  
  25.         this.layerProp=exProp;
  26.  
  27.     }
  28.  
  29. function exProp()
  30.  
  31.     {
  32.  
  33.     return document.all[arguments[arguments.length-1]].style;
  34.  
  35.     }
  36.  
  37. function navProp()
  38.  
  39.     {
  40.  
  41.     retVal="";
  42.  
  43.     for (var x=0;x<arguments.length;x++)
  44.  
  45.         {
  46.  
  47.         retVal+="document.layers[\'"+arguments[x]+"\']";
  48.  
  49.         if (x!=arguments.length-1)
  50.  
  51.             retVal+=".";
  52.  
  53.         }
  54.  
  55.     return eval(retVal);
  56.  
  57.     }
  58.  
  59. function Point(X,Y)
  60.  
  61.     {
  62.  
  63.     this.x=X;
  64.  
  65.     this.y=Y;
  66.  
  67.     }
  68.  
  69. function rect(X1,Y1,X2,Y2)
  70.  
  71.     {
  72.  
  73.     this.left=X1;
  74.  
  75.     this.top=Y1;
  76.  
  77.     this.right=X2;
  78.  
  79.     this.bottom=Y2;
  80.  
  81.     }
  82.  
  83. function foster(child,ancestor)
  84.  
  85.     {
  86.  
  87.     for (x in ancestor)
  88.  
  89.         {
  90.  
  91.         if (!(child [x.toString()]))
  92.  
  93.              child [x.toString()]=ancestor[x];
  94.  
  95.         }
  96.  
  97.     }
  98.  
  99. function random (limit)
  100.  
  101.     {
  102.  
  103.      return (Math.round(((Math.random())*1000))%limit);
  104.  
  105.     }
  106.  
  107.  
  108.  
  109. function layerObject(layerID,pos,vel,z,bounds,bounce)
  110.  
  111.     {
  112.  
  113.     // properties
  114.  
  115.     this.layerID=layerID;
  116.  
  117.     this.position=pos;
  118.  
  119.     this.velocity=vel;
  120.  
  121.     this.boundsRect=bounds;
  122.  
  123.     this.depth=z;
  124.  
  125.     this.bounce=bounce;
  126.  
  127.     this.visibility="visible";
  128.  
  129.     this.isGoing=false;
  130.  
  131.     this.active=true;
  132.  
  133.     // methods
  134.  
  135.     this.show=showLayer;
  136.  
  137.     this.setZorder=setZorder;
  138.  
  139.     this.hide=hideLayer;
  140.  
  141.     this.setPosition=setPosition;
  142.  
  143.     this.draw=drawLayer;
  144.  
  145.     this.update=updateLayer;
  146.  
  147.     this.journey=journey;
  148.  
  149.     this.courseCorrect=courseCorrect;
  150.  
  151.     this.show();
  152.  
  153.     }
  154.  
  155.  
  156.  
  157. function setZorder(z)
  158.  
  159.     {
  160.  
  161.     this.depth=z;
  162.  
  163.     }
  164.  
  165. function showLayer()
  166.  
  167.     {
  168.  
  169.     L.layerProp(this.layerID).visibility="visible";
  170.  
  171.     }
  172.  
  173. function hideLayer()
  174.  
  175.     {
  176.  
  177.     L.layerProp(this.layerID).visibility="hidden";
  178.  
  179.     }
  180.  
  181. function drawLayer()
  182.  
  183.     {
  184.  
  185.     L.layerProp(this.layerID).zIndex=this.depth;
  186.  
  187.     L.layerProp(this.layerID).left=(this.position).x;
  188.  
  189.     L.layerProp(this.layerID).top=(this.position).y;
  190.  
  191.     }
  192.  
  193. function setPosition(pos)
  194.  
  195.     {
  196.  
  197.     this.position=pos;
  198.  
  199.     }
  200.  
  201. function journey(target,jumps)
  202.  
  203.     {
  204.  
  205.     this.leaps=jumps;//number of jumps
  206.  
  207.     this.target=target;
  208.  
  209.     this.isGoing=true;
  210.  
  211.     this.active=true;
  212.  
  213.     }
  214.  
  215. function courseCorrect()
  216.  
  217.     {
  218.  
  219.     var xDist=(this.target.x-this.position.x);
  220.  
  221.     var yDist=(this.target.y-this.position.y);
  222.  
  223.     if (this.leaps>1)
  224.  
  225.         {
  226.  
  227.         this.leaps--;
  228.  
  229.         this.velocity.x=Math.round( xDist/(this.leaps) ) ;
  230.  
  231.         this.velocity.y=Math.round( yDist/(this.leaps) );
  232.  
  233.         }
  234.  
  235.     else
  236.  
  237.         {
  238.  
  239.         this.isGoing=false;
  240.  
  241.         this.velocity=new Point(0,0);
  242.  
  243.         }
  244.  
  245.     }
  246.  
  247. function updateLayer()
  248.  
  249.     {
  250.  
  251.     if (this.isGoing)
  252.  
  253.         this.courseCorrect();
  254.  
  255.     if (this.velocity.x==0 && this.velocity.y==0)
  256.  
  257.         this.active=false;
  258.  
  259.     else
  260.  
  261.         this.active=true;
  262.  
  263.     var newPos=new Point(this.position.x+this.velocity.x,
  264.  
  265.                            this.position.y+this.velocity.y);
  266.  
  267.     if (this.bounce && ! this.isGoing)
  268.  
  269.         {
  270.  
  271.         if (newPos.x>this.boundsRect.right || newPos.x<this.boundsRect.left)
  272.  
  273.             {
  274.  
  275.             this.velocity.x = this.velocity.x*-1;
  276.  
  277.             newPos.x += (this.velocity.x *2);
  278.  
  279.             }
  280.  
  281.         if (newPos.y>this.boundsRect.bottom || newPos.y<this.boundsRect.top)
  282.  
  283.             {
  284.  
  285.             this.velocity.y=this.velocity.y*-1;
  286.  
  287.             newPos.y+= (this.velocity.y *2);
  288.  
  289.             }
  290.  
  291.         }
  292.  
  293.     this.setPosition(newPos);
  294.  
  295.     }
  296.  
  297.  
  298.  
  299. function noteObject(layerID,pos,z)
  300.  
  301.     {
  302.  
  303.     this.ancestor=new layerObject(layerID,
  304.  
  305.                                     pos,
  306.  
  307.                                     new Point(0,0),
  308.  
  309.                                     z,
  310.  
  311.                                     new rect(0,0,1000,1000),
  312.  
  313.                                     false);
  314.  
  315.     foster(this,this.ancestor);
  316.  
  317.     this.defaultDepth=z;
  318.  
  319.     this.home=pos;
  320.  
  321.     }
  322.  
  323.  
  324.  
  325. function noteManager()
  326.  
  327.     {
  328.  
  329.     this.LayerList=new Array();
  330.  
  331.     this.add=noteAdd;
  332.  
  333.     this.select=noteSelect;
  334.  
  335.     }
  336.  
  337.  
  338.  
  339. function noteAdd(LayerObj)
  340.  
  341.     {
  342.  
  343.     this.LayerList[this.LayerList.length]=LayerObj;
  344.  
  345.     this.zone=new Point(LayerObj.position.x+160,LayerObj.position.y);
  346.  
  347.     }
  348.  
  349.  
  350.  
  351. function noteSelect(LayerName)
  352.  
  353.     {
  354.  
  355.     for (var x=0;x<this.LayerList.length;x++)
  356.  
  357.         {
  358.  
  359.         if (this.LayerList[x].layerID==LayerName)
  360.  
  361.             {
  362.  
  363.             if (this.LayerList[x].depth==100)
  364.  
  365.                 {
  366.  
  367.                 this.LayerList[x].setZorder(this.LayerList[x].defaultDepth);
  368.  
  369.                 this.LayerList[x].journey(this.LayerList[x].home,6);
  370.  
  371.                 }
  372.  
  373.             else
  374.  
  375.                 {
  376.  
  377.                 this.LayerList[x].setZorder(100);
  378.  
  379.                 this.LayerList[x].journey(this.zone,6);
  380.  
  381.                 }
  382.  
  383.             }
  384.  
  385.         else
  386.  
  387.             {
  388.  
  389.             this.LayerList[x].setZorder(this.LayerList[x].defaultDepth);
  390.  
  391.             this.LayerList[x].journey(this.LayerList[x].home,6);
  392.  
  393.             }
  394.  
  395.         this.LayerList[x].draw();
  396.  
  397.         }
  398.  
  399.     }
  400.  
  401.  
  402.  
  403. function layerManager()
  404.  
  405.     {
  406.  
  407.     this.update=managerUpdate;
  408.  
  409.     this.add=managerAdd;
  410.  
  411.     this.draw=managerDraw;
  412.  
  413.     this.layerList=new Array();
  414.  
  415.     }
  416.  
  417. function managerAdd(l)
  418.  
  419.     {
  420.  
  421.     this.layerList[this.layerList.length]=l;
  422.  
  423.     l.draw();
  424.  
  425.     l.show();
  426.  
  427.     }
  428.  
  429. function managerUpdate()
  430.  
  431.     {
  432.  
  433.     for (x=0;x<this.layerList.length;x++)
  434.  
  435.         {
  436.  
  437.         if (this.layerList[x].active)
  438.  
  439.             this.layerList[x].update();
  440.  
  441.         }
  442.  
  443.     }
  444.  
  445. function managerDraw()
  446.  
  447.     {
  448.  
  449.     for (x=0;x<this.layerList.length;x++)
  450.  
  451.         {
  452.  
  453.         if (this.layerList[x].active)
  454.  
  455.             this.layerList[x].draw();
  456.  
  457.         }
  458.  
  459.     }
  460.  
  461.  
  462.  
  463. p=new Array();
  464.  
  465. p[0]=new Area(25,30,125,75,"http://www.corrosive.co.uk/");
  466.  
  467. p[1]=new Area(5,125,130,175,"http://www.corrosive.co.uk/");
  468.  
  469. p[2]=new Area(115,100,225,126,"http://www.corrosive.co.uk/");
  470.  
  471.  
  472.  
  473. m=new map("m","container","topLayer",p);
  474.  
  475. function Area(X1,Y1,X2,Y2,url)
  476.  
  477.     {
  478.  
  479.     this.left=X1;
  480.  
  481.     this.top=Y1;
  482.  
  483.     this.right=X2;
  484.  
  485.     this.bottom=Y2;
  486.  
  487.     this.url=url;
  488.  
  489.     }
  490.  
  491.  
  492.  
  493. function map(name,container,top,areas)
  494.  
  495.     {
  496.  
  497.     this.name=name;
  498.  
  499.     this.top=top;
  500.  
  501.     this.container=container;
  502.  
  503.     this.areas=areas;
  504.  
  505.     this.writeMap=writeMap;
  506.  
  507.     this. highlight=highlight;
  508.  
  509.     this.reset=reset;
  510.  
  511.     this.timeout=null;
  512.  
  513.     }
  514.  
  515. function writeMap (mapName)
  516.  
  517.     {
  518.  
  519.     document.write("<map name="+mapName+">");
  520.  
  521.     for (x=0;x<this.areas.length;x++)
  522.  
  523.         {
  524.  
  525.         document.write("<area shape=\"RECT\" href='"+this.areas[x].url+"' 
  526. onMouseOver='"+this.name+".highlight("+x+")' ");
  527.  
  528.         document.write("onMouseOut='"+this.name+".reset()' ");
  529.  
  530.         document.write("COORDS=\""+this.areas[x].left+","+this.areas[x].top+" 
  531. "+this.areas[x].right+","+this.areas[x].bottom+"\">");
  532.  
  533.         }
  534.  
  535.     document.write("</map>");
  536.  
  537.     }
  538.  
  539. function highlight(num)
  540.  
  541.     {
  542.  
  543.     clearTimeout(this.timeout);
  544.  
  545.     this.timeout=setTimeout(this.name+".reset()",5000);
  546.  
  547.     L.layerProp(this.container,this.top).visibility="visible";
  548.  
  549.     L.layerProp(this.container,this.top).clip.top=this.areas[num].top;
  550.  
  551.     L.layerProp(this.container,this.top).clip.left=this.areas[num].left;
  552.  
  553.     L.layerProp(this.container,this.top).clip.bottom=this.areas[num].bottom;
  554.  
  555.     L.layerProp(this.container,this.top).clip.right=this.areas[num].right;
  556.  
  557.     }
  558.  
  559. function reset()
  560.  
  561.     {
  562.  
  563.     L.layerProp(this.container,this.top).visibility="hidden";
  564.  
  565.     }
  566.  
  567.  
  568.  
  569. function init()
  570.  
  571.     {
  572.  
  573.     layerMan=new layerManager();
  574.  
  575.     noteMan=new noteManager();
  576.  
  577.     var yPos=30;
  578.  
  579.     for (var x=1;x<=5;x++)
  580.  
  581.         {
  582.  
  583.         note=new noteObject("note"+x,new Point(10,yPos),x);
  584.  
  585.         layerMan.add(note);
  586.  
  587.         noteMan.add(note);
  588.  
  589.         yPos+=30;
  590.  
  591.         }
  592.  
  593.     var xPos=200;
  594.  
  595.     for (var y=1;y<=3;y++)
  596.  
  597.         {
  598.  
  599.         temp=new layerObject(
  600.  
  601.             "heading"+y,
  602.  
  603.             new Point (xPos,300),
  604.  
  605.             new Point (random(30)-15,random(30)-15),
  606.  
  607.             200,
  608.  
  609.             new rect(180,30,500,400),
  610.  
  611.             true
  612.  
  613.             )
  614.  
  615.         layerMan.add(temp);
  616.  
  617.         xPos+=150;
  618.  
  619.         }
  620.  
  621.     cycle();
  622.  
  623.     }
  624.  
  625. function cycle()
  626.  
  627.     {
  628.  
  629.     layerMan.update();
  630.  
  631.     layerMan.draw();
  632.  
  633.     setTimeout("cycle()",20);
  634.  
  635.     }
  636.  
  637. </SCRIPT>
  638.  
  639.  
  640.  
  641. <STYLE TYPE="text/css">
  642.  
  643. .shuffleClass{
  644.  
  645.     POSITION: absolute;
  646.  
  647.     WIDTH: 150px;
  648.  
  649.     VISIBILITY: hidden;
  650.  
  651.     }
  652.  
  653. .headings{
  654.  
  655.     POSITION:absolute;
  656.  
  657.     FONT-WEIGHT:100;
  658.  
  659.     FONT-FAMILY:sans-serif;
  660.  
  661.     COLOR:#0066cc;
  662.  
  663.     FONT-SIZE:24pt;
  664.  
  665.     VISIBILITY:hidden;
  666.  
  667.     }
  668.  
  669. .maps{
  670.  
  671.     POSITION:absolute;
  672.  
  673.     }
  674.  
  675. #container{
  676.  
  677.     POSITION:absolute;
  678.  
  679.     TOP: 130;
  680.  
  681.     LEFT:250;
  682.  
  683.     VISIBILITY: visible;
  684.  
  685.     }
  686.  
  687. #topLayer{
  688.  
  689.     VISIBILITY:hidden;
  690.  
  691.     }
  692.  
  693. ink, A:visited, A:active{
  694.  
  695.     COLOR:#0D20AE;
  696.  
  697.     FONT-WEIGHT:bold;
  698.  
  699.     FONT-FAMILY: sans-serif;
  700.  
  701.     TEXT-DECORATION: none
  702.  
  703.     }
  704.  
  705. </STYLE>
  706.  
  707.  
  708.  
  709. <BODY BGCOLOR="#ffffff" onLoad="init()">
  710.  
  711. <SCRIPT>
  712.  
  713. m.writeMap("myMap");
  714.  
  715. </SCRIPT>
  716.  
  717. <DIV ID="note1" CLASS="shuffleClass">
  718.  
  719. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  720.  
  721. <TR><TD VALIGN=TOP>
  722.  
  723. <A HREF="JavaScript:noteMan.select('note1');">About Us</A>
  724.  
  725. <P>
  726.  
  727. links and information
  728.  
  729. </P>
  730.  
  731. </TD></TR>
  732.  
  733. </TABLE>
  734.  
  735. </DIV>
  736.  
  737.  
  738.  
  739. <DIV ID="note2" CLASS="shuffleClass">
  740.  
  741. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  742.  
  743. <TR><TD VALIGN=TOP>
  744.  
  745. <A HREF="JavaScript:noteMan.select('note2');">Clients</A>
  746.  
  747. <P>
  748.  
  749. links and information
  750.  
  751. </P>
  752.  
  753. </TD></TR>
  754.  
  755. </TABLE>
  756.  
  757. </DIV>
  758.  
  759.  
  760.  
  761. <DIV ID="note3" CLASS="shuffleClass">
  762.  
  763. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  764.  
  765. <TR><TD VALIGN=TOP>
  766.  
  767. <A HREF="JavaScript:noteMan.select('note3');">Freebies</A>
  768.  
  769. <P>
  770.  
  771. links and information
  772.  
  773. </P>
  774.  
  775. </TD></TR>
  776.  
  777. </TABLE>
  778.  
  779. </DIV>
  780.  
  781.  
  782.  
  783. <DIV ID="note4" CLASS="shuffleClass">
  784.  
  785. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  786.  
  787. <TR><TD VALIGN=TOP>
  788.  
  789. <A HREF="JavaScript:noteMan.select('note4');">Links</A>
  790.  
  791. <P>
  792.  
  793. links and information
  794.  
  795. </P>
  796.  
  797. </TD></TR>
  798.  
  799. </TABLE>
  800.  
  801. </DIV>
  802.  
  803.  
  804.  
  805. <DIV ID="note5" CLASS="shuffleClass">
  806.  
  807. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  808.  
  809. <TR><TD VALIGN=TOP>
  810.  
  811. <A HREF="JavaScript:noteMan.select('note5');">Welcome</A>
  812.  
  813. <P>
  814.  
  815. links and information
  816.  
  817. </P>
  818.  
  819. </TD></TR>
  820.  
  821. </TABLE>
  822.  
  823. </DIV>
  824.  
  825.  
  826.  
  827. <DIV ID="container">
  828.  
  829.     <DIV ID="bottomLayer" CLASS="maps">
  830.  
  831.     <IMG SRC="res/apple1.gif" USEMAP="#myMap" BORDER=0>
  832.  
  833.     </DIV>
  834.  
  835.     <DIV ID="topLayer" CLASS="maps">
  836.  
  837.     <IMG NAME=TEST SRC="res/apple2.gif" USEMAP="#myMap" BORDER=0>
  838.  
  839.     </DIV>
  840.  
  841. </DIV>
  842.  
  843.  
  844.  
  845. <DIV ID="heading1" CLASS="headings">
  846.  
  847. Dynamic
  848.  
  849. </DIV>
  850.  
  851. <DIV ID="heading2" CLASS="headings">
  852.  
  853. Web
  854.  
  855. </DIV>
  856.  
  857. <DIV ID="heading3" CLASS="headings">
  858.  
  859. Design
  860.  
  861. </DIV>
  862.  
  863. </BODY>
  864.  
  865. </HTML>
  866.  
  867.